<template>
	<view class="my-container">
		<view class="header-container">
			<view class="left-header">
				<image src="../../static/Hot.png" mode="widthFix" @click="gotoMyInfo"></image>
				<view class="center-content">
					<view class="top-phone">{{userInfo.phone?userInfo.phone:"请绑定手机号"}}</view>
					<view class="top-value">甜蜜值 15/30</view>
					<progress :percent="personObj.value" activeColor="#10AEFF" stroke-width="4" />
				</view>
			</view>
			<view class="right-header">
				<text class="text-words">签到</text>
			</view>
		</view>
		
		<view class="main-container">
			<view class="quan-container">
				<view class="quan-common" @click="goCurrency()">
					<view class="left-content">
						<view class="title-words">{{userInfo.xuewang}}</view>
						<view class="subtitle-words">雪王币</view>
					</view>
					<view class="right-content">
						<image src="../../static/bi.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="quan-common">
					<view class="left-content">
						<view class="title-words">0</view>
						<view class="subtitle-words">优惠券</view>
					</view>
					<view class="right-content">
						<image src="../../static/quan.png" mode="widthFix"></image>
					</view>					
				</view>
			</view>
			<view class="ul-container">
				<view class="li-nav" v-for="item in list" @click="jumpPage(item)">
					<image class="left-icon" :src="item.image"></image>
					<text class="title-words">{{item.title}}</text>
					<image class="right-icon" src="../../static/right.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {baseUrl} from "../../utils/request.js" ;
	export default {
		data() {
			return {
				userInfo:getApp().globalData.userInfo,
				personObj:{
					phone:"1323432434",//手机号
					value:13,//甜蜜值
				},
				list:[
					{
						image:"../../static/qrcode.png",
						title:"兑换码"
					},
					{
						image:"../../static/lock.png",
						title:"隐私政策"
					},
					{
						image:"../../static/file.png",
						title:"用户服务协议"
					},
					{
						image:"../../static/gongshi.png",
						title:"经营信息公示"
					},
					{
						image:"../../static/kefu.png",
						title:"问题反馈"
					},
					{
						image:"../../static/jiameng.png",
						title:"加盟咨询"
					},
					{
						image:"../../static/lock.png",
						title:"退出登录"
					},
				]
			}
		},
		onShow() {
		    this.phoneNumShow()
			this.getUserInfo()
		},
		methods: {
			getUserInfo(){
				uni.request({
				    // url: 'https://www.fastmock.site/mock/68c3c014a443685834fb331ec92e7e9d/show/shop',
					method:"get",
				    url: baseUrl+'/mixuebingcheng/user/'+getApp().globalData.userInfo.id,
					// data:this.userInfo,
				    success: (res) => {
				        // console.log(res);
						getApp().globalData.userInfo = res.data.data
						this.userInfo = getApp().globalData.userInfo
						// this.signinFlagToday()
				    }
				});
			},
			//隐藏手机号
			phoneNumShow() {
			    let that = this;
			    let number = this.personObj.phone; //获取到手机号码字段
			    let mphone = number.substring(0, 3) + '****' + number.substring(7);
			    that.personObj.phone = mphone
			    // console.log(that.phone, '1');
			},
			
			// 跳转至 我的资料页面
			gotoMyInfo(){
				// console.log("Hello")
				uni.navigateTo({
					url: '/pages/my/myInfo'
				})
			},
			
			/**
			 * 跳转到雪王币
			 */
			goCurrency() {
				uni.navigateTo({
					url: '/pages/my/currency'
				})
			},
			/**
			 * 跳转
			 */
			jumpPage(item) {
				if(item.title=='隐私政策')
				uni.navigateTo({
					url: '/pages/my/policy'
				})
				else if(item.title=='用户服务协议')
				uni.navigateTo({
					url: '/pages/my/userAgreement'
				})
				else if(item.title == '经营信息公示'){
					uni.navigateTo({
						url: '/pages/my/businessInfo'
					})
				}
				else if(item.title == '退出登录'){
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
.my-container{
	// margin-top: 50px;
	color: rgb(51, 51, 51);
	.header-container{
		// margin-top: 50px;
		height: 120px;
		position: relative;
		padding: 20upx;
		padding-top: 90upx;
		background-color: rgb(220, 232, 255);
		.left-header{
			image{
				width:120upx;
				height: 120upx;
				border-radius: 120upx;
			}
			.center-content{
				display: inline-block;
				margin-left: 10rpx;
				height:120upx ;
				vertical-align: top;
				.top-phone{
					margin-top: 10upx;
				}
				.top-value{
					font-size: 20upx;
					margin: 10upx 0;
				}
			}
		}
		.right-header{
			float: right;
			position: absolute;
			top: 70%;
			margin-top: -20upx;
			right: 20upx;
			.text-words{
				background-color: #fff;
				display: inline-block;
				height: 40upx;
				line-height: 40upx;
				width: 100upx;
				text-align: center;
				border-radius: 60upx;
				vertical-align: top;
				font-size: 24upx;
			}
		}
	}
	.main-container{
		padding: 20upx;
		.quan-container{
			.quan-common{
				display: inline-block;
				width: 48%;
				height: 100upx;
				border-radius: 20upx;
				padding: 10upx 20upx;
				box-sizing: border-box;
				border:1px solid #e7c000;
				.left-content{
					display: inline-block;
					width: calc(100% - 100upx);
					.subtitle-words{
						font-size: 20upx;
						color: #999;
						margin-top: 6upx;
					}
				}
				.right-content{
					display: inline-block;
					float: right;
					margin-top:10upx;
					image{
						width: 60upx;
					}
				}
			}
			.quan-common:last-child{
				float: right;
			}
		}
		.ul-container{
			padding: 20upx;
			.li-nav{
				margin: 40upx 0;
				.left-icon{
					width: 40upx;
					height: 40upx;
				}
				.title-words{
					display: inline-block;
					color: rgb(51, 51, 51);
					height: 40upx;
					line-height: 40upx;
					vertical-align: top;
					margin-left: 20upx;
				}.right-icon{
					width: 30upx;
					height: 30upx;
					float: right;
					margin-top: 5upx;
				}
			}
		}
	}
}
</style>
